import React from 'react';
import PropTypes from 'prop-types';
import styles from './FilterItem.less';

const FilterItem = ({
    label = '',
    children,
}) => {
    const labelArray = label.split('');
    return (
        <div className={styles.filterItem}>
            {labelArray.length > 0
                ? <div className={styles.labelWrap}>
                    {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
                </div>
                : ''}
            <div className={styles.item}>
                {children}
            </div>
        </div>
    );
};

FilterItem.propTypes = {
    label: PropTypes.string,
    children: PropTypes.element.isRequired,
};

export default FilterItem;
